<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <!-- 引入 Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <!-- 引入 Font Awesome CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <!-- 引入 Element UI -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 自定义样式 -->
    <style>
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            padding-top: 56px;
        }

        .navbar {
            background-color: #343a40;
            color: #fff;
            padding: 10px;
        }

        .main-content {
            display: flex;
            margin: 20px;
        }

        .main-section {
            flex: 1;
            margin-right: 20px;
        }

        .sidebar {
            width: 250px;
            background-color: #ffffff;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
        }

        .section {
            background-color: #ffffff;
            margin-bottom: 20px;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .chart-container {
            height: 350px;
        }

        .table-section table {
            width: 100%;
        }

        .footer {
            text-align: center;
            padding: 20px;
            background-color: #343a40;
            color: white;
            position: fixed;
            width: 100%;
            bottom: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <!-- navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top">
        <a class="navbar-brand" href="#">后台管理系统</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link" href="#"><i class="fas fa-user"></i> 欢迎, 管理员</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" @click="toggleFullScreen"><i class="fas fa-compress-arrows-alt"></i> 切换全屏</a>
                </li>
            </ul>
        </div>
    </nav>

    <!-- main content -->
    <div class="main-content">
        <!-- 主内容区 -->
        <div class="main-section">
            <!-- 跑马灯公告 -->
            <div class="section">
                <div class="marquee">
                    <marquee>{{ latestAnnouncement }}</marquee>
                </div>
            </div>
            <!-- 图表及表格 -->
            <div class="section chart-container" id="user-registration-chart"></div>
            <div class="section">
                <h5>最近用户数据</h5>
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>日期</th>
                        <th>用户</th>
                        <th>地址</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(user, index) in userData" :key="index">
                        <td>{{ user.date }}</td>
                        <td>{{ user.user }}</td>
                        <td>{{ user.address }}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="section chart-container" id="gender-ratio-chart"></div>
            <div class="section chart-container" id="province-chart"></div>
        </div>
        <!-- 侧边栏 -->
        <div class="sidebar">
            <div class="section">
                <h5>最近公告</h5>
                <ul class="list-group">
                    <li class="list-group-item" v-for="(announcement, index) in announcements" :key="index">
                        <small>{{ announcement.date }}</small>
                        <p>{{ announcement.content }}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- footer -->
    <div class="footer">
        <div>版权所有@后台管理系统</div>
    </div>
</div>

<!-- 引入 Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入 Element UI -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入 jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- 引入 ECharts -->
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<!-- 自定义脚本 -->
<script>
    new Vue({
        el: '#app',
        data: {
            latestAnnouncement: '欢迎使用后台管理系统！',
            announcements: [
                { date: '2023-08-01', content: '系统将在8月10日进行维护。' },
                { date: '2023-07-25', content: '新增用户分析功能。' },
                { date: '2023-07-15', content: '系统性能优化和Bug修复。' },
                { date: '2023-07-01', content: '新版本上线，欢迎使用。' }
            ],
            userData: [
                { date: '2023-08-01', user: '张三', address: '江苏南京' },
                { date: '2023-08-02', user: '李四', address: '浙江杭州' },
                { date: '2023-08-03', user: '王五', address: '福建厦门' }
            ]
        },
        mounted() {
            this.initECharts();
        },
        methods: {
            toggleFullScreen() {
                let elem = document.documentElement;
                if (!document.fullscreenElement) {
                    elem.requestFullscreen().catch(err => {
                        alert(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
                    });
                } else {
                    document.exitFullscreen();
                }
            },
            initECharts() {
                this.initUserRegistrationChart();
                this.initGenderRatioChart();
                this.initProvinceChart();
            },
            initUserRegistrationChart() {
                var chartDom = document.getElementById('user-registration-chart');
                var myChart = echarts.init(chartDom);
                var option = {
                    title: {
                        text: '每周用户注册数',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'line',
                        smooth: true
                    }]
                };
                myChart.setOption(option);
            },
            initGenderRatioChart() {
                var chartDom = document.getElementById('gender-ratio-chart');
                var myChart = echarts.init(chartDom);
                var option = {
                    title: {
                        text: '用户性别比例',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left',
                        data: ['男', '女']
                    },
                    series: [
                        {
                            name: '性别比例',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: 1048, name: '男'},
                                {value: 735, name: '女'}
                            ],
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                };
                myChart.setOption(option);
            },
            initProvinceChart() {
                var chartDom = document.getElementById('province-chart');
                var myChart = echarts.init(chartDom);
                var option = {
                    title: {
                        text: '用户省份分布',
                        left: 'center'
                    },
                    xAxis: {
                        type: 'category',
                        data: ['江苏', '浙江', '福建', '上海', '北京']
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: [500, 300, 200, 150, 100],
                        type: 'bar',
                        barWidth: '50%'
                    }]
                };
                myChart.setOption(option);
            }
        }
    });
</script>
</body>
</html>
